<template>
  <div>
    <div class="box">
      <h3>属性规格编辑</h3>
      <el-button class="btn el-icon-back" @click="fan">返回</el-button>
      <el-form class="el-form" v-model="from">
        <el-form-item label="属性名称" class="el-form-item">
          <el-input
            class="el-input"
            v-model="from.name"
            placeholder="color"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格" class="el-form-item">
          <el-tag
            v-for="item in spec_name"
            :key="item.id"
            closable
            :disable-transitions="false"
            @close="handleClose(item)"
          >
            {{ item.name }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            >+ New Tag</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="primary" class="tijiao" @click="ti">提交</el-button>
    </div>
  </div>
</template>
<script>
import { adds } from "../../api/api";
export default {
  components: {},
  data() {
    return {
      from: {
        name: "",
      },
      spec_name: [],
      inputVisible: false,
      inputValue: "",
      id: this.$route.query.id || 0,
    };
  },
  mounted() {
    this.$axios.get("/goods_attrs/" + this.id).then((res) => {
      this.from.name = res.data.data.name;
      this.spec_name = res.data.data.specs;
    });
  },
  methods: {
    // 返回
    fan() {
      this.$router.push({ name: "SellerGoods_attrs" });
    },
    // 提交
    ti() {
      // 有id 就是修改
      if (this.id) {
        let f = new FormData();
        f.append("name", this.from.name);
        this.$axios.put("/goods_attrs/" + this.id, f).then((res) => {
          console.log(res);
        });
        this.$router.push({ name: "SellerGoods_attrs" });
      }
      // 如果没有id 就是添加
      else {
        adds(this.from.name, this.spec_name).then((res) => {
          this.$message({
            message: `${res.data.msg}`,
            type: "success",
          });
        });
        this.$router.push({ name: "SellerGoods_attrs" });
      }
    },
    handleClose(tag) {
      this.spec_name.splice(this.spec_name.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.spec_name.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.box {
  width: 1450px;
  height: 700px;
  background: #fff;
}
h3 {
  float: left;
  margin: 20px;
}
.btn {
  float: right;
  margin-right: 100px;
  margin-top: 20px;
}
.el-form {
  float: left;
}
.el-form-item {
  width: 600px;
  float: left;
  margin-left: 160px;
  margin-top: 60px;
}
.el-input {
  width: 500px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.tijiao {
  float: left;
  margin-top: 30px;
  margin-left: 600px;
}
</style>